body {
    background-color: #2b2b2b;
    margin: 0;
    padding: 0;
}

.loader {
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.loader span {
    color: rgba(255, 255, 255, .1);
    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 30px;
    display: inline-block;
    transition: all .5s;
    animation: animate 2s infinite;
}

.loader span:nth-child(1) { animation-delay: .1s; }
.loader span:nth-child(2) { animation-delay: .2s; }
.loader span:nth-child(3) { animation-delay: .3s; }
.loader span:nth-child(4) { animation-delay: .4s; }
.loader span:nth-child(5) { animation-delay: .5s; }
.loader span:nth-child(6) { animation-delay: .6s; }
.loader span:nth-child(7) { animation-delay: .7s; }
.loader span:nth-child(8) { animation-delay: .8s; }
.loader span:nth-child(9) { animation-delay: .9s; }
.loader span:nth-child(10) { animation-delay: 1s; }

@keyframes animate {
    0% {
        color : rgba(255, 255, 255, .1);
        transform: translateY(0);
    }
    25% {
        color : yellow;
        transform: translateY(-20px);
        margin-right: 10px;
        text-shadow: 0 15px 5px rgb(0,0,0,1);
    }
    100% {
        color : rgba(255, 255, 255, .1);
        transform: translateY(0);
    }
}